<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact List</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.0/dist/cdn.min.js" defer></script>
    <style>
        body {
            background-color: #f4f7fc;
            font-family: 'Arial', sans-serif;
        }

        .container {
            max-width: 1000px;
            margin-top: 50px;
        }

        .card {
            background-color: #fff;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }

        .form-inline {
            display: flex;
            justify-content: space-between;
        }

        .form-control {
            border-radius: 5px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
            font-size: 16px;
            padding: 10px 20px;
            border-radius: 5px;
        }

        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #004085;
        }

        table th, table td {
            vertical-align: middle;
        }

        table th {
            background-color: #007bff;
            color: #fff;
            font-weight: bold;
        }

        table tbody tr:nth-child(odd) {
            background-color: #f9f9f9;
        }

        table tbody tr:hover {
            background-color: #e9ecef;
        }

        .btn-info, .btn-danger {
            font-size: 14px;
        }

        .btn-sm {
            padding: 5px 10px;
        }
    </style>
</head>
<body>
<div class="container" x-data="contactList()">
    <div class="card">
        <h1>Contact List</h1>

        <!-- Query Form -->
        <div class="row mb-4">
            <div class="col-md-6 mb-2 mb-md-0">
                <form @submit.prevent="searchContacts('name')">
                    <input type="text" class="form-control" x-model="searchQuery.name" placeholder="Search by Name" />
                    <button type="submit" class="btn btn-secondary ml-2 mt-2 mt-md-0">Search by Name</button>
                </form>
            </div>
            <div class="col-md-6">
                <form @submit.prevent="searchContacts('phoneNumber')">
                    <input type="text" class="form-control" x-model="searchQuery.phoneNumber" placeholder="Search by Phone" />
                    <button type="submit" class="btn btn-secondary ml-2 mt-2 mt-md-0">Search by Phone</button>
                </form>
            </div>
        </div>

        <!-- Add New Contact Button -->
        <a class="btn btn-primary mb-3" href="/contacts/add">Add New Contact</a>

        <!-- Contacts Table -->
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>Name</th>
                <th>Phone Number</th>
                <th>Email</th>
                <th>School</th>
                <th>Gender</th>
                <th>Birth Year</th>
                <th>Major</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <template x-for="contact in contacts" :key="contact.id">
                <tr>
                    <td x-text="contact.name"></td>
                    <td x-text="contact.phoneNumber"></td>
                    <td x-text="contact.email"></td>
                    <td x-text="contact.school"></td>
                    <td x-text="contact.gender"></td>
                    <td x-text="contact.birthYear"></td>
                    <td x-text="contact.major"></td>
                    <td>
                        <a class="btn btn-info btn-sm" :href="`/contacts/edit?id=${contact.id}`">Edit</a>
                        <button class="btn btn-danger btn-sm" @click="deleteContact(contact.id)">Delete</button>
                    </td>
                </tr>
            </template>
            </tbody>
        </table>
    </div>
</div>

<script>
    function contactList() {
        return {
            contacts: [],
            searchQuery: {
                name: '',
                phoneNumber: ''
            },
            fetchContacts() {
                fetch('/contacts')
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Failed to fetch contacts');
                        }
                        return response.json();
                    })
                    .then(data => {
                        this.contacts = data;
                    })
                    .catch(error => console.error('Error:', error));
            },
            searchContacts(type) {
                const query = type === 'name' ? this.searchQuery.name.trim() : this.searchQuery.phoneNumber.trim();
                if (!query) {
                    alert(`Please enter a ${type} to search.`);
                    return;
                }

                const url = `/contacts/search?${type}=${encodeURIComponent(query)}`;
                fetch(url)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Search request failed');
                        }
                        return response.json();
                    })
                    .then(data => {
                        this.contacts = data;
                    })
                    .catch(error => console.error('Error:', error));
            },
            deleteContact(id) {
                if (!confirm('Are you sure you want to delete this contact?')) return;

                fetch(`/contacts/delete?id=${id}`, { method: 'DELETE' })
                    .then(response => {
                        if (response.ok) {
                            this.contacts = this.contacts.filter(contact => contact.id !== id);
                        } else {
                            alert('Failed to delete contact.');
                        }
                    })
                    .catch(error => console.error('Error:', error));
            },
            init() {
                this.fetchContacts();
            }
        };
    }
</script>
</body>
</html>


<!--
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact List</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f4f7fc;
            font-family: 'Arial', sans-serif;
        }

        .container {
            max-width: 1000px;
            margin-top: 50px;
        }

        .card {
            background-color: #fff;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }

        .form-inline {
            display: flex;
            justify-content: space-between;
        }

        .form-control {
            border-radius: 5px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .btn-secondary {
            background-color: #6c757d;
            border-color: #6c757d;
            font-size: 16px;
            padding: 10px 20px;
            border-radius: 5px;
        }

        .btn-secondary:hover {
            background-color: #5a6268;
            border-color: #545b62;
        }

        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
            font-size: 16px;
            padding: 10px 20px;
            border-radius: 5px;
        }

        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #004085;
        }

        table th, table td {
            vertical-align: middle;
        }

        table th {
            background-color: #007bff;
            color: #fff;
            font-weight: bold;
        }

        table tbody tr:nth-child(odd) {
            background-color: #f9f9f9;
        }

        table tbody tr:hover {
            background-color: #e9ecef;
        }

        .btn-info, .btn-danger {
            font-size: 14px;
        }

        .btn-sm {
            padding: 5px 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="card">
        <h1>Contact List</h1>

        &lt;!&ndash; Query Form (By Name or Phone Number) &ndash;&gt;
        <div class="row mb-4">
            <div class="col-md-6 mb-2 mb-md-0">
                <form th:action="@{/contacts/search}" method="get" class="form-inline">
                    &lt;!&ndash; Search by Name &ndash;&gt;
                    <input type="text" name="name" class="form-control" placeholder="Search by Name" />
                    <button type="submit" class="btn btn-secondary ml-2">Search by Name</button>
                </form>
            </div>
            <div class="col-md-6">
                <form th:action="@{/contacts/search}" method="get" class="form-inline">
                    &lt;!&ndash; Search by Phone Number &ndash;&gt;
                    <input type="text" name="phoneNumber" class="form-control" placeholder="Search by Phone" />
                    <button type="submit" class="btn btn-secondary ml-2">Search by Phone</button>
                </form>
            </div>
        </div>

        &lt;!&ndash; Add New Contact Button &ndash;&gt;
        <a class="btn btn-primary mb-3" th:href="@{/contacts/add}">Add New Contact</a>

        &lt;!&ndash; Contacts Table &ndash;&gt;
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>Name</th>
                <th>Phone Number</th>
                <th>Email</th>
                <th>School</th>
                <th>Gender</th>
                <th>Birth Year</th>
                <th>Major</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            &lt;!&ndash; Iterate over contacts and display each one &ndash;&gt;
            <tr th:each="contact : ${contacts}">
                <td th:text="${contact.name}"></td>
                <td th:text="${contact.phoneNumber}"></td>
                <td th:text="${contact.email}"></td>
                <td th:text="${contact.school}"></td>
                <td th:text="${contact.gender}"></td>
                <td th:text="${contact.birthYear}"></td>
                <td th:text="${contact.major}"></td>
                <td>
                    &lt;!&ndash; Edit and Delete buttons &ndash;&gt;
                    <a class="btn btn-info btn-sm" th:href="@{/contacts/edit(id=${contact.id})}">Edit</a>
                    <a class="btn btn-danger btn-sm" th:href="@{/contacts/delete(id=${contact.id})}" onclick="return confirm('Are you sure you want to delete?')">Delete</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

&lt;!&ndash; JS imports &ndash;&gt;
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
-->
